<template>
  <div>
    <el-dialog
      class="dialog-style"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :show-close="false"
      :append-to-body="true">
      <div slot="title" class="title">
        <el-button class="back" type="text" @click="dialogVisible=false;">返回</el-button>
        <span>履历详情</span>
      </div>
      <div class="content" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <div class="search-bar">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item>
              <el-button type="primary" size="mini" @click="selectDingUsers('resumeDingId', 'name', 1)">{{searchForm.name}}</el-button>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchForm.resumeTitle" placeholder="请选择主题" style="width: 150px;">
                <el-option label="全部" value=""></el-option>
                <el-option :label="theme.name" :value="theme.name" v-for="theme in themeList" :key="theme.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker type="date" placeholder="请选择查询起始日期" v-model="searchForm.startTime" value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-date-picker type="date" placeholder="请选择查询截止日期" v-model="searchForm.endTime" value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getResumeList(true)">查询</el-button>
            </el-form-item>
          </el-form>
          <div class="btn-group">
            <el-button type="primary" size="mini" @click="showReportDialog(false)" v-if="isAuth('archives:person:update')">新增履历</el-button>
          </div>
        </div>
        <div class="record-wrapper">
          <div class="record-item" v-for="(record, index) in recordList" :key="record.id">
            <div class="theme" v-if="index===0 || record.resumeCreateTime !== recordList[index-1].resumeCreateTime">{{record.resumeCreateTime}}</div>
            <div class="item-detail">
              <div>
                <div class="theme">{{record.resumeTitle}}</div>
                <div class="row-1">{{record.resumeDesciption}}</div>
                <div class="row-2">{{record.resumeRewardPunishment}}</div>
              </div>
              <div class="item-edit"><el-button type="text" @click="showReportDialog(record)" v-if="isAuth('archives:person:update') && (record.resumeTitle !== '人事调动' && record.resumeTitle !== '积分红利' && record.resumeTitle !== '力沃奖惩' && record.resumeTitle !== '绩效考核')">编辑</el-button></div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="!reportForm.id ? '新增履历' : '编辑履历'"
      :visible.sync="reportDialogVisible"
       :close-on-click-modal="false"
      width="520px">
      <el-form ref="reportForm" :model="reportForm" label-width="80px">
        <el-form-item label="主题" prop="resumeTitle"
        :rules="[{ required: true, message: '请选择主题', trigger: 'blur' }]">
          <el-select v-model="reportForm.resumeTitle" placeholder="请选择主题" style="width: 100%;">
            <el-option :label="theme.name" :value="theme.name" v-for="theme in themeList" :key="theme.id" :disabled="theme.name === '人事调动' || theme.name === '积分红利' || theme.name === '力沃奖惩' || theme.name === '绩效考核'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="resumeDesciption"
        :rules="[{ required: true, message: '请输入说明', trigger: 'blur' }]">
          <el-input type="textarea" v-model="reportForm.resumeDesciption" rows="4" placeholder="请输入说明"></el-input>
        </el-form-item>
        <el-form-item label="奖惩">
          <el-input type="textarea" v-model="reportForm.resumeRewardPunishment" placeholder="请输入奖惩有关内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" style="display: flex; justify-content: space-between;">
        <div><el-button @click="delReport" size="mini" type="danger" v-if="reportForm.id">删除</el-button></div>
        <div>
          <el-button @click="reportDialogVisible = false" size="mini">取消</el-button>
          <el-button type="primary" @click="submitReportForm('reportForm')" size="mini">确定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
export default {
  data () {
    return {
      dialogVisible: false,
      themeList: [],
      searchForm: {
        resumeDingId: '',
        name: '',
        resumeTitle: '',
        startTime: null,
        endTime: null,
      },
      recordList: [],
      reportDialogVisible: false,
      reportForm: {
        resumeDingId: '',
        resumeTitle: '',
        resumeDesciption: '',
        resumeRewardPunishment: '',
      },
      isFirstLoading: true,
      loading: false,
      totalPage: 1,
      page: 1,
    };
  },
  mixins: [dingMixin],
  components: {},
  computed: {
    noMore () {
      return this.page >= this.totalPage
    },
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    }
  },
  methods: {
    init(id, name) {
      this.searchForm.resumeDingId = id;
      this.searchForm.name = name;
      this.getDictList();
      this.getResumeList(true);
      this.dialogVisible = true;
    },
    async getDictList() {
      let {list} = await this.$httpN.postB('hr/dict/list', { pid: '1320629089493946370', limit: 999 })
      this.themeList = list;
    },
    load() {
      this.loading = true;
      this.page ++;
      this.getResumeList();
    },
    async getResumeList(init) {
      if(init) {
        this.page = 1;
        this.isFirstLoading = true;
        this.recordList = [];
      }
      let {list, totalPage} = await this.$httpN.postB('archives/resume/list', {
        resumeDingId: this.searchForm.resumeDingId,
        resumeTitle: this.searchForm.resumeTitle,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        page: this.page
      })
      if(list) {
        this.recordList.push(...list)
        this.loading = false;
        if(init) {
          this.totalPage = totalPage;
          this.$nextTick(() => {
            this.isFirstLoading = false;
          })
        }
      }
    },
    selectDingUsers(id, name, num){
      let idArr = [];
      idArr.push(this.searchForm[id])
      this.complexPicker(num, [], idArr).then((data)=>{
        this.searchForm[id] = data.map(item => item.emplId).join(',');
        this.searchForm[name] = data.map(item => item.name).join(',');
        this.getResumeList(true);
      })
    },
    showReportDialog(item) {
      formUtil.resetData(this.reportForm);
      if(this.$refs.reportForm) this.$refs.reportForm.clearValidate();
      if(item) {
        this.reportForm = JSON.parse(JSON.stringify(item))
      } else {
        this.reportForm.resumeDingId = this.searchForm.resumeDingId;
      }
      this.reportDialogVisible = true;
    },
    submitReportForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if( !await this.$httpN.postB(!this.reportForm.id ? 'archives/resume/save' : 'archives/resume/update', this.reportForm)) return
          formUtil.submitSuccess('保存成功');
          this.reportDialogVisible = false;
          this.getResumeList(true);
        }
      });
    },
    async delReport() {
      formUtil.submitConfirm('请问您是否确认删除该记录', async ()=> {
        if(!await this.$httpN.postB('archives/resume/delete', [this.reportForm.id], false)) return;
        formUtil.submitSuccess('删除成功');
        this.reportDialogVisible = false;
        this.getResumeList(true);
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.dialog-style {
  /deep/ .el-dialog__header, /deep/ .el-dialog__body {
    padding: 0;
  }
  .title {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
    position: relative;
    .back {
      position: absolute;
      left: 20px;
      top: 7px;
      cursor: pointer;
    }
  }
  .content {
    padding: 10px 20px;
    height: calc(100vh - 67px);
    overflow: auto;
    .search-bar {
      display: flex;
      justify-content: space-between;
      .search-form {
        flex: 1;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        .el-form-item {
          margin-bottom: 0;
        }
        .name {
          font-size: 18px;
          line-height: 36px;
          font-weight: 400;
          cursor: pointer;
          display: inline-block;
          color: #409EFF;
        }
      }
      .btn-group {
        display: flex;
        align-items: center;
      }
    }
    .record-wrapper {
      .record-item {
        margin-top: 20px;
        .theme {
          display: inline-block;
          padding: 4px 30px;
          background-color: #666;
          color: #FFF;
          border-radius: 20px;
        }
        .item-detail {
          margin-left: 40px;
          margin-top: 15px;
          padding: 10px 15px;
          background-color: #CCC;
          display: flex;
          justify-content: space-between;
          &:hover {
            .item-edit {
              .el-button {
                display: block;
              }
            }
          }
          .row-1 {
            margin-top: 15px;
            margin-left: 20px;
          }
          .row-2 {
            margin-top: 10px;
            margin-left: 20px;
          }
          .item-edit {
            margin-left: 20px;
            min-width: 30px;
            .el-button {
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>